import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
// import Login from './components/Login.vue'
// import Register from './components/Register.vue'
// import Refind from './components/Refind.vue'
// import Home from './components/Home.vue'

// import Echarts from './components/demo/echarts.vue'
// import Ueditor from './components/demo/ueditor.vue'

// import Back from './back/backContainer.vue'
// import Welcome from './back/backComponets/index/Welcome.vue'
// import Statistics from './back/backComponets/index/Statistics.vue'
// import Users from './back/backComponets/user/Users.vue'
// import Roles from './back/backComponets/power/Roles.vue'
// import Rights from './back/backComponets/power/Rights.vue'
// import Articles from './back/backComponets/article/Articles.vue'
// import ArticleClassify from './back/backComponets/article/ArticleClassify.vue'
// import ArticleIssue from './back/backComponets/article/ArticleIssue.vue'
// import Comments from './back/backComponets/comment/Comments.vue'
// import Styles from './back/backComponets/set/Styles.vue'
// import Emails from './back/backComponets/news/Emails.vue'
// import Complaints from './back/backComponets/news/Complaints.vue'

import View from './view/viewContainer.vue'
import Blogs from './view/blog/Blogs.vue'
import Trans from './view/blog/trans.vue'
import BlogEdit from './view/blog/BlogEdit.vue'
import BlogDetail from './view/blog/BlogDetail.vue'
import BlogClassify from './view/blog/BlogClassify.vue'
import BlogComment from './view/blog/BlogComment.vue'
import BlogFind from './view/blog/BlogFind.vue'
import UserEdit from './view/user/UserEdit.vue'
import UserDetail from './view/user/UserDetail.vue'
import UserUpload from './view/user/UserUpload.vue'

Vue.use(VueRouter)

// 路由规则，实现地址定向
const routes = [
    { path: '/', redirect: '/view' },
    { path: '/login', component: () => import('./components/Login.vue') },
    { path: '/register', component: () => import('./components/Register.vue') },
    { path: '/refind', component: () => import('./components/Refind.vue') },
    { path: '/home', component: () => import('./components/Home.vue') },
    { path: '/demo/echarts', component: () => import('./components/demo/echarts.vue') },
    { path: '/demo/ueditor', component: () => import('./components/demo/ueditor.vue') },

    // 后台路由重定向
    {
        path: '/back',
        component: () => import('./back/backContainer.vue'),
        redirect: 'index/welcome',
        children: [
            { path: '/index/welcome', component: () => import('./back/backComponets/index/Welcome.vue') },
            { path: '/index/statistics', component: () => import('./back/backComponets/index/Statistics.vue') },
            { path: '/user/users', component: () => import('./back/backComponets/user/Users.vue') },
            { path: '/power/roles', component: () => import('./back/backComponets/power/Roles.vue') },
            { path: '/power/rights', component: () => import('./back/backComponets/power/Rights.vue') },
            { path: '/article/articles', component: () => import('./back/backComponets/article/Articles.vue') },
            { path: '/article/classify', component: () => import('./back/backComponets/article/ArticleClassify.vue') },
            { path: '/article/issue', component: () => import('./back/backComponets/article/ArticleIssue.vue') },
            { path: '/comment/comments', component: () => import('./back/backComponets/comment/Comments.vue') },
            { path: '/set/styles', component: () => import('./back/backComponets/set/Styles.vue') },
            { path: '/news/emails', component: () => import('./back/backComponets/news/Emails.vue') },
            { path: '/news/complaints', component: () => import('./back/backComponets/news/Complaints.vue') }
        ]
    },

    // 前台路由重定向
    {
        path: '/view',
        component: View,
        redirect: '/blogs',
        children: [

            {
                path: '/trans',
                name: 'Trans',
                component: Trans
            },

            {
                path: '/blogs',
                name: 'Blogs',
                component: Blogs
            },
            {
                path: '/blog/add',
                name: 'BlogAdd',
                component: BlogEdit
            },
            {
                path: '/blog/edit/:blogId',
                name: 'BlogEdit',
                component: BlogEdit
            },
            {
                path: '/blog/:blogId',
                name: 'BlogDetail',
                component: BlogDetail
            },
            {
                path: '/blogClassify',
                name: 'BlogClassify',
                component: BlogClassify
            },
            {
                path: '/blogComment',
                name: 'BlogComment',
                component: BlogComment
            },
            {
                path: '/blogFind',
                name: 'BlogFind',
                component: BlogFind
            },
            {
                path: '/user/UserEdit',
                name: 'UserEdit',
                component: UserEdit
            },
            {
                path: '/user/UserDetail',
                name: 'UserDetail',
                component: UserDetail
            },
            {
                path: '/user/UserUpload',
                name: 'UserUpload',
                component: UserUpload
            }
        ]
    }
]

const router = new VueRouter({
    routes
})

// // 挂载路由导航守卫
// router.beforeEach((to, from, next) => {
//   // to 将要访问的路径
//   // from 代表从那个路径跳转而来
//   // next 是一个函数，表示放行
//   // next() 放行 next('/login') 强制跳转

//   if (to.path === '/login') return next()
//   else if (to.path === '/register') return next()
//   else if (to.path === '/refind') return next()
//   // 获取token
//   const tokenStr = window.sessionStorage.getItem('token')

//   if (!tokenStr) return next('/login')
//   next()
// })

// 挂载路由导航守卫
// 判断token是否存在，如果存在将携带token进行下一簇的操作，如果不存在，则返回登陆
router.beforeEach((to, from, next) => {
    if (to.matched.some((route) => route.meta.Auth)) {
        if (localStorage.getItem('token')) {
            next()
        } else {
            next({
                path: '/login',
                query: {
                    returnURL: to.path
                }
            })
        }
    } else {
        next()
    }
})

export default router
